<script setup>
const props = defineProps({
  items: { type: Array, default: () => [] },
  role: { type: String, default: 'student' },
})
</script>

<template>
  <div class="table-card">
    <table>
      <thead>
        <tr>
          <th>类型</th>
          <th>时间段</th>
          <th>时长(h)</th>
          <th v-if="role !== 'student'">学生</th>
          <th>状态</th>
          <th style="width: 140px">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="!items.length">
          <td colspan="6" class="empty">暂无数据</td>
        </tr>
        <tr v-for="(it, idx) in items" :key="idx">
          <td>{{ it.typeLabel }}</td>
          <td>{{ it.timeRange }}</td>
          <td>{{ it.hours }}</td>
          <td v-if="role !== 'student'">{{ it.studentName }}</td>
          <td>
            <slot name="status" :status="it.status" />
          </td>
          <td>
            <slot name="actions" :row="it" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped>
.table-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  padding: 12px 14px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
}
th {
  background: #fafafa;
  color: #1d1d1f;
  font-weight: 700;
}
tbody tr:hover {
  background: #fffaf5;
}
.empty {
  text-align: center;
  color: var(--muted-text);
  padding: 24px;
}
</style>
